<template>
  <div>
    <el-row type="flex" justify="center" align="middle">
      <el-col :span="20">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="titleText">{{ this.postAo.title }}</span>
            <span>.</span>
            <el-button @click="backIndex" style="float: right; padding: 3px 0;color: white" type="text">返回首页
            </el-button>
          </div>
          <el-collapse v-model="activeNames" @change="handleChange">

            <el-collapse-item name="1">
              <template slot="title">
                <p >问题描述(点击展开/收缩)</p>
              </template>
              <div>{{ this.postAo.content }}</div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <p >处理办法(点击展开/收缩)</p>
<!--                <p class="title">处理办法(点击展开/收缩)</p>-->
              </template>
              <div>{{ this.postAo.anwser }}</div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <template slot="title">
                <p >附件信息(点击展开/收缩)</p>
              </template>
              <el-image :src="this.postAo.imageurl">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "detialpage",
  data() {
    return {
      postAo: {},
      activeNames: ['1'],
      src: ''
    }
  },
  methods: {
    handleChange(val) {
      // console.log(val);
    },
    backIndex() {
      this.$router.push({path: '/'});
    },
    // 获取数据
    gettingData() {
      this.postAo = this.$route.params.post
      // console.log(this.postAo)
    }
  },
  created() {
    this.gettingData()
  },


}
</script>

<style scoped>
.titleText {
  float: left;
  font-weight: bold;
  margin-bottom: 20px;
  color: white;
}

.title {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;

}

::v-deep .el-collapse-item__header.is-active {
  border-bottom: 1px solid #ebeef5;
}

::v-deep .el-collapse-item__wrap {
  border: none;
}

p {
  margin: 0;
  padding: 0;
}

.row {
  overflow: hidden;
  margin-bottom: 22px;
}

.row .col_left {
  float: left;
  width: 420px;
}

.row .col_right {
  float: left;
}

.box-card {
  border: 1px solid transparent;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0.5);
}

</style>
